<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" />
<style type="text/css">
    .redBorder{border: 1px solid red;}
    
    #apps_tools_create_win_body .k-upload-files{display: none;}
    #apps_tools_create_win_body .k-file{display: none;}

    #apps_tools_create_win_body .appsToolscreateDiv{margin-top: 10px; line-height: 20px;}
    #apps_tools_create_win_body .appsToolscreateSpan{width: 72px; height: 20px; font-size: 12px; float: left; margin-right: 10px; line-height: 20px}

    #apps_tools_create_win_body textarea{border: 1px solid #D8D8D8;}
    #apps_tools_create_win_body .textareaOnFocusStyle{box-shadow: 0 0 7px 0 #D8D8D8 !important;}

    /*kendo upload*/
    #apps_tools_create_select_file .k-button{min-width:0; width:45px; padding:0;margin:0;}
    #apps_tools_create_select_file .k-upload-button{background-color: #6cbf43!important;float:right;}
    #apps_tools_create_select_file .k-upload-button span{height:20px; line-height:20px; font-size:9px;}
    .mandatory_symbols{ position: absolute;color: red;margin-left: 3px;margin-top: 3px;}
    .apps_tools_create_win{position:relative;width: 510px;}
</style>

<div id="apps_tools_create_win" class="apps_tools_create_win">
    <div id="apps_tools_create_win_body" class="wp_ml_15 wp_mr_15 wp_h_390" style="position: relative;">
        <div class="appsToolscreateDiv">
            <div id="appLabel" class="appsToolscreateSpan">App Label<span class="mandatory_symbols">*</span></div>
            <input id="apps_tools_create_app_label_input" type="text" class="wp_fz_12 wp_w_396 k-textbox" data-bind="value:AppTitle" maxlength="255" />
        </div>
        <!-- select photo -->
        <div id="apps_tools_create_select_file" class="appsToolscreateDiv wp_h_20">
            <span class="appsToolscreateSpan">Icon<span class="mandatory_symbols">*</span></span>
            <input id="apps_tools_create_select_file_name" type="text" class="wp_fz_12 wp_w_347 left k-textbox" disabled="true"　/>
            <input type="file" name="files" id="apps_tools_create_select_file_field" class="wp_fz_12" />
        </div>
        
        <div class="wp_mt_10">
            <span class="appsToolscreateSpan">Icon preview</span>
            <img src="imgs/imgBackgroundGreen_80x50.png" alt="" style="position: relative;" />
            <img id="apps_tools_win_green_img" src="" style="position:absolute;top: 66px; left: 100px; display: none" class="wp_w_40 wp_h_40" data-bind="attr:{src:ImageURL}" onerror="this.src='imgs/40.png'" />
            <img src="imgs/imgBackgroundBlue_80x50.png" alt="" class="wp_ml_20" style="position: relative; display: none;" />
            <img id="apps_tools_win_blue_img" src="" style="position:absolute;top: 66px; left: 205px; display: none;" class="wp_w_40 wp_h_40" data-bind="attr:{src:ImageURL}" onerror="this.src='imgs/40.png'" />
        </div>
        <!-- Description -->
        <div style="margin-top: 10px;" class="appsToolscreateDiv">
            <span class="appsToolscreateSpan">Description<span class="mandatory_symbols">*</span></span>
            <textarea id="apps_tools_create_desc" rows="4" class="wp_fz_12 wp_w_396" style="resize: none;" onfocus="$(this).addClass('textareaOnFocusStyle')" onblur="$(this).removeClass('textareaOnFocusStyle')" data-bind="value:AppDescription" maxlength="255"></textarea>
        </div>
        <!-- Intranet URL -->
        <div class="appsToolscreateDiv">
            <span class="appsToolscreateSpan">URL<span class="mandatory_symbols">*</span></span>
            <input id="apps_tools_create_url" type="text" class="wp_fz_12 wp_w_396 k-textbox" data-bind="value:AppURL" maxlength="2047" />
        </div>
        <div class="wp_h_20 wp_w_480 appsToolscreateDiv" style="position: absolute; bottom: 10px;text-align: right">
            <a id="apps_tools_create_del" href="javascript:void(0)" class="left wp_mt_5" onclick="appsToolsCreateWin.app_tools_create_win_del()">
                <i id="delete_btn" class="main_common_n_10_10" title="Delete"></i>
            </a>
            <button id="submitButton" type="button" class="k-button wp_w_50 wp_h_20 wp_fz_12 right" onClick="appsToolsCreateWin.app_tools_create_save('Submit')">Submit</button>
            <button id="cancelButton" type="button" class="btn-bf k-button wp_w_50 wp_h_20 wp_fz_12 wp_mr_20 right" onClick="appsToolsCreateInfoWin.data('kendoWindow').close();" >Cancel</button>
        </div>
    </div>
</div>
<!-- event bind -->
<script  type="text/javascript">
    var appsToolsCreateWinCreateInfo = {"appId": -1, "modified": false};

    var appsToolsCreateInfoWin = $('#apps_tools_create_win');
    appsToolsCreateInfoWin.kendoWindow({width:'510px', height: '400px', title:'Register', modal: true, visible:false, resizable: false, draggable: false, actions:["Close"], close:function(){}}).data("kendoWindow").center();

    //select file
    var appsToolsCreateWinSelectedFile;
    $("#apps_tools_create_select_file_field").kendoUpload({
        localization: {
            select: "Browse"
        },
        select: function(e) {
            var fileAppointType = ".jpg.jpeg.png.gif.bmp", file = e.files[0];
            
            //Check the file type
            if (fileAppointType.indexOf(file.extension.toLowerCase()) < 0) {
                Workport.utils.alertMsg("Register", "The image must be of type jpg, jpeg, png, gif, bmp file", function(_data){});
                return;
            }
            // Check file size < 2MB
            if (file.size > (2 * 1024 * 1024)) {
                Workport.utils.alertMsg("Register", "The image size must be within 2MB.", function(_data){});
                return;
            }
            
            $('#apps_tools_create_select_file_name').val(e.files[0].name);

            if ($(".k-state-focused input:first").is(':hidden')) {
                $(".k-state-focused input:first").remove();
            }

            $("#apps_tools_create_select_file ul li").remove();

            var fileReader = new FileReader();
            fileReader.readAsDataURL(e.files[0].rawFile);
            fileReader.onload = function(e) {
                $("#apps_tools_win_green_img").attr("src", e.target.result);
                $("#apps_tools_win_blue_img").attr("src", e.target.result);
                appsToolsCreateWinSelectedFile = e.target.result.replace(/^.*?,/, '');
                $("#apps_tools_win_green_img").show();
                // $("#apps_tools_win_blue_img").show();
            }

            appsToolsCreateWinCreateInfo.modified = true;
        }
    });
</script>
<!-- function -->
<script type="text/javascript">
    var appsToolsCreateWin = (function () {
        var appsToolsCreateWinResponseSuccessCode = ['WP1019', 'WP1022'];
        var appsToolsCreateWinSaveErr = false;
        var appsId;
        var loader = new Workport.Loader($('#apps_tools_create_win'),{boxCSS:{'opacity':1}});
        loader.hide();
        function apps_tools_win_clear_input () {
            $("#apps_tools_create_app_label_input").val("");
            $("#apps_tools_create_select_file_name").val("");
            $("#apps_tools_create_desc").val("");
            $("#apps_tools_create_url").val("");
            $("#apps_tools_win_green_img").hide();
            $("#apps_tools_win_blue_img").hide();
            appsToolsCreateWinCreateInfo.modified = false;
            appsToolsCreateWinSelectedFile = "";
            appsToolsCreateWinCreateInfo.image = "";
        }

        function apps_tools_win_add_kendotooltip (elementName, val, alertContent) {
            if (!val) {
				showValidationTooltip(elementName,alertContent);
            }else if('#apps_tools_create_app_label_input' == elementName){
				var reg1=/^[A-Za-z0-9\s*]+$/;
				if(!reg1.test(val)){
					showValidationTooltip(elementName,'Must enter Alpha-numeric characters only.');
				}
			}
        }
		
		function showValidationTooltip(elementName,alertContent){
			$(elementName).kendoTooltip({
				content: alertContent,
				position: "right",
				hide: function() {
					$(elementName).data('kendoTooltip').destroy();
				},
				show:function(){
					//$(elementName).data('kendoTooltip').arrow.css('top','16px');                        
				}
			});
			$(elementName).data('kendoTooltip').show();              
			//$(elementName).data('kendoTooltip').content.css({'padding':'7px 10px 6px 10px','margin-top':'5px'});
			appsToolsCreateWinSaveErr = true;
		}

        function ownAlertMsg (msg) {
            Workport.utils.alertMsg(appsToolsCreateInfoWin.data("kendoWindow").title() + " Alert", msg, function(_data){});
        }

        function IsURL(str_url){
            var re=/^(https?|s?ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/;
            if (re.test(str_url.toLowerCase())){
                return true;
            }else{
                return false;
            }
        }
		
		function urlStart(str_url){
			if(/^((https|http):\/\/){1}/.test(str_url)){return true;}
			else{return false;}
		}
		
        return {
            apps_tools_win_create : function (appId) {
                appsId = appId;
                apps_tools_win_clear_input();
                if (appId) {
                    loader.show();
                    Workport.AppAPI.getEditDetail(function (data) {
                        loader.hide();
                        if ($.inArray(data.ResponseCode, appsToolsCreateWinResponseSuccessCode) == -1) {
                            ownAlertMsg(data.ResponseMessage);
                        } else {
                            $("#apps_tools_win_top_button").hide();
                            // $("#apps_tools_win_green_img").css("top", "66px");
                            // $("#apps_tools_win_blue_img").css("top", "66px");
                            $("#apps_tools_win_green_img").show();
                            // $("#apps_tools_win_blue_img").show();
                            $("#apps_tools_create_del").show();

                            appsToolsCreateWinCreateInfo.appId = data.AppId;
                            var appsToolsCreateWinViewModel = kendo.observable(data);
                            kendo.bind($("#apps_tools_create_win_body"), appsToolsCreateWinViewModel);
                            appsToolsCreateInfoWin.data("kendoWindow").title("Edit");
                        }
                    }, {"appId": appId});
                } else {
                    // $("#apps_tools_win_green_img").css("top", "66px");
                    // $("#apps_tools_win_blue_img").css("top", "66px");
                    $("#apps_tools_create_del").hide();
                    appsToolsCreateInfoWin.data("kendoWindow").title("Register");
                    appsToolsCreateWinCreateInfo.modified = true;
                    appsToolsCreateWinCreateInfo.appId = -1;
                }
                appsToolsCreateInfoWin.data("kendoWindow").wrapper.find('.k-i-close').prop("id","close_btn");
                appsToolsCreateInfoWin.data("kendoWindow").open();
            },
            app_tools_create_save : function (buttonType) {
                appsToolsCreateWinCreateInfo.mode = buttonType;
                appsToolsCreateWinCreateInfo.title = $.trim($("#apps_tools_create_app_label_input").val());
                apps_tools_win_add_kendotooltip("#apps_tools_create_app_label_input", appsToolsCreateWinCreateInfo.title, "Must enter an App Label to proceed.");
                
                if (appsToolsCreateWinCreateInfo.modified) {
                    appsToolsCreateWinCreateInfo.image = appsToolsCreateWinSelectedFile;
                    apps_tools_win_add_kendotooltip("#apps_tools_create_select_file", appsToolsCreateWinSelectedFile, "Must upload an App Icon to proceed.");
                }
                
                appsToolsCreateWinCreateInfo.description = $("#apps_tools_create_desc").val();
                apps_tools_win_add_kendotooltip("#apps_tools_create_desc", appsToolsCreateWinCreateInfo.description, "Must enter an App Description to proceed.");
                
                appsToolsCreateWinCreateInfo.url = $("#apps_tools_create_url").val();
                apps_tools_win_add_kendotooltip("#apps_tools_create_url", appsToolsCreateWinCreateInfo.url, "Must enter a valid URL.");

                var urlStr=appsToolsCreateWinCreateInfo.url;
                // if(urlStr&&urlStr.substring(0,7)!="http://"&&urlStr.substring(0,8)!="https://"&&!IsURL(urlStr)){
                //     apps_tools_win_add_kendotooltip("#apps_tools_create_url", null, "URL should be start with http:// or https://.");
                // }
                if(urlStr){
					if(!urlStart(urlStr)){apps_tools_win_add_kendotooltip("#apps_tools_create_url", null, "URL must start with http:// or https://.");}
                    else if(!IsURL(urlStr)){apps_tools_win_add_kendotooltip("#apps_tools_create_url", null, "Please enter a valid URL.");}
                }

                if (appsToolsCreateWinSaveErr) {
                    appsToolsCreateWinSaveErr = false;
                    return;
                }
                loader.show();
                Workport.AppAPI.registerApp(function (data) {
                    loader.hide();
                    if ($.inArray(data.ResponseCode, appsToolsCreateWinResponseSuccessCode) == -1) {
                        ownAlertMsg(data.ResponseMessage);
                    } else {
                        if (appsId) {
                            wp_apps_tools.refreshAddOrEditByPopWin();
                            ownAlertMsg("Your changes have been submitted for moderator approval.");
                        } else {
                            ownAlertMsg("Your request is submitted for moderator approval.");
                        }
                        appsToolsCreateInfoWin.data("kendoWindow").close();
                    }
                }, appsToolsCreateWinCreateInfo);
            },
            app_tools_create_win_del : function () {
                Workport.utils.alertMsg(appsToolsCreateInfoWin.data("kendoWindow").title() + " Alert", "Do you want to delete the application?", "Yes", function (_data){
                    if(_data==true){
                        loader.show();
                        Workport.AppAPI.deleteApp(function (data) {
                            loader.hide();
                            if ($.inArray(data.ResponseCode, appsToolsCreateWinResponseSuccessCode) == -1) {
                                ownAlertMsg(data.ResponseMessage);
                            } else {
                                appsToolsCreateInfoWin.data("kendoWindow").close();
                                ownAlertMsg("The App details have been deleted.");
                                wp_apps_tools.refreshAddOrEditByPopWin();
                            }
                        }, {"appId": appsId, "action": "Delete"});
                    }
                });
            }
        };
    })();
</script>